<template>
  <div id="map">
  </div>
</template>

<script setup>
import Map from 'ol/Map';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import MVT from 'ol/format/MVT';
import View from 'ol/View';
import {onMounted, ref} from 'vue';
const map = ref(null);

onMounted(() => {
  const vectorTileLayer = new VectorTileLayer({
    source: new VectorTileSource({
      format: new MVT(),
      url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
    })
  })
  map.value = new Map({
    target:'map',
    layers: [vectorTileLayer],
    //配置视图
    view: new View({
      center: [0, 0],
      zoom: 0,
    }),
  })

  console.log(map.value.getLayers());

  vectorTileLayer.on('postrender', (event) => {
    console.log(event,'图层渲染完成');
  })
})
</script>


<style scoped>
#map {
  width: 100%;
  height: 100%;
}

.MapTool {
  position: absolute;
  top: .5em;
  right: .5em;
  z-index: 9999;
}
</style>